<template>
	<div class="theme">
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="img">
					<van-icon name="arrow-left" size="22" style="position: absolute;z-index: 99;top: 10px;left: 10px;" @click="onClickLeft" />
					<van-row style="padding: 35px 30px;">
						<van-col span="6">
							<div style="width: 60px;height: 60px;border: 2px solid #fff;border-radius: 50%;background: #fff;">
								<van-image width="60" height="60" :src="picture2" round/>
							</div>
						</van-col>
						<van-col span="18" style="padding-top: 5px;">
							<span style="font-size: 15px;" v-text="personal.userName">钓鱼佬</span>
							<van-tag round type="success" v-if="personal.levelName">{{ personal.levelName }}</van-tag>
							<div style="padding-top: 5px;" v-text="$t('Mine.v1') + '：' + personal.uuid">夏天的雨</div>
						</van-col>
					</van-row>
				</div>
				<div style="padding: 0px 20px;position: relative;margin-top: -55px;">
					<div class="mimeText bg-overlayColor product-title-color">
						<van-row class="textRow" @click="$router.push({path: '/Invite'})">
							<van-col span="4">
								<img src="../assets/images/My-3.png" class="imgLeft">
							</van-col>
							<van-col span="20" class="textRight">
								{{$t('Mine.v1')}}
							</van-col>
						</van-row>
						<van-row class="textRow" @click="$router.push({path: '/Safety'})">
							<van-col span="4">
								<img src="../assets/images/My-4.png" class="imgLeft">
							</van-col>
							<van-col span="20" class="textRight">
								{{$t('Mine.v2')}}
							</van-col>
						</van-row>
						<van-row class="textRow" @click="$router.push({path: '/Lang'})">
							<van-col span="4">
								<img src="../assets/images/My-10.png" class="imgLeft">
							</van-col>
							<van-col span="20" class="textRight">
								{{$t('Mine.v3')}}
							</van-col>
						</van-row>
						<van-row class="textRow" @click="$router.push({path: '/ToChange'})">
							<van-col span="4">
								<img src="../assets/images/My-6.png" class="imgLeft">
							</van-col>
							<van-col span="20" class="textRight">
								{{$t('Mine.v4')}}
							</van-col>
						</van-row>
						<van-row class="textRow" @click.native="OutChange()">
							<van-col span="4">
								<img src="../assets/images/My-7.png" class="imgLeft">
							</van-col>
							<van-col span="20" class="textRight">
								{{$t('Mine.v5')}}
							</van-col>
						</van-row>
						<van-row class="textRow"  @click.native="$router.push({path: '/MyTeam'})">
							<van-col span="4">
								<img src="../assets/images/My-8.png" class="imgLeft">
							</van-col>
							<van-col span="20" class="textRight">
								{{$t('Mine.v6')}}
							</van-col>
						</van-row>
						<!--<van-row class="textRow"  @click.native="$router.push({path: '/MyReward'})">
							<van-col span="4">
								<img src="../assets/images/My-9.png" class="imgLeft">
							</van-col>
							<van-col span="20" class="textRight">
								我的奖励
							</van-col>
						</van-row>-->
						<van-row class="textRow" v-show="show">
							<van-col span="4">
								<img src="../assets/images/bbh.png" class="imgLeft">
							</van-col>
							<van-col span="20" class="textRight">
								<span>{{$t('Mine.v7')}}</span>
								<span style="float: right;color: #999;margin-top: 4px;" v-text="localVer">0.0.1</span>
							</van-col>
						</van-row>
						<van-row class="textRow">
							<van-col span="4">
								<img src="../assets/images/theme.png" class="imgLeft">
							</van-col>
							<van-col span="4" class="textRight">
								{{$t('Mine.v8')}}
							</van-col>
							<van-col span="16" style="margin-left: -10px;font-size: 16px;margin-top: 4px;text-align: right;">
								<van-switch v-model="checked" size="22px" active-color="#07c160" inactive-color="#A9A9A9" @change="theme" />
							</van-col>
						</van-row>
					</div>
				</div>
				<div style="padding: 10px 20px;">
					<van-button type="primary" @click.native="Log" :loading="loading" style="width: 100%;">{{$t('Mine.v9')}}</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mine, base } from './../utils/api';
	import { Dialog } from 'vant';
	let _this;
	export default {
		name: 'Mine',
		components: {},
		props: {},
		data() {
			return {
				picture: require('./../assets/images/My-1.png'),
				picture2: require('./../assets/images/my.png'),
				personal: [],
				localVer: '0.0.1', //版本号
				show: false,
				loading: false,
				checked: true
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			getPer() {
				mine.getPersonal().then(res => {
					this.personal = res.data;
				})
			},
			onClickLeft() {
				this.$router.push({
					path: '/Assets'
				});
			},
			Log() {
				Dialog.confirm({
					message: _this.$t('Mine.v10'),
					confirmButtonText: _this.$t('Mine.v11'),
					cancelButtonText: _this.$t('Mine.v12'),
					cancelButtonColor: '#A9A9A9'
				}).then(() => {
					base.getSignOut().then(res => {
						sessionStorage.clear();
						localStorage.clear();
						_this.axios.defaults.headers['Authorization'] = '';
						_this.$toast(res.msg);
						_this.$router.push({
							path: '/Login'
						});
					})
				}).catch(() => {

				});
			},
			theme() {
				if(this.checked == true) {
					$("#style").attr("href", "./static/css/white_theme.css");
					localStorage.setItem("style", "./static/css/white_theme.css");
				} else if(this.checked == false) {
					$("#style").attr("href", "./static/css/black_theme.css");
					localStorage.setItem("style", "./static/css/black_theme.css");
				}
			},
			OutChange() {
				if(sessionStorage.token) {
					this.axios.get(process.env.API_HOST + 'user/getIsTradePass').then(res => { // 判断是还是设置交易密码
						if(res.data.data == 1) { // 当true为已设置交易密码
							this.$router.push({
								path: '/OutChange'
							});
						} else {
							let _this = this
							Dialog.confirm({
								message: _this.$t('Mine.v13') + '！',
								confirmButtonText: _this.$t('Mine.v14'),
								cancelButtonText: _this.$t('Mine.v15'),
								cancelButtonColor: '#A9A9A9'
							}).then(() => {
								_this.$router.push({
									path: '/UpdatePayPwd',
									query: {
										type: 0,
										roid: 'Mine'
									}
								})
							}).catch(() => { //稍后设置

							});
						}
					})
				}
			},
		},
		created() {

		},
		mounted() {
			if(localStorage.style.includes('black_theme')){
				this.checked = false;
			}
			this.getPer();
			_this.$nextTick(() => {
				setTimeout(() => {
					if(window.plus) {
						// 获取本地应用资源版本号
						plus.runtime.getProperty(plus.runtime.appid, function(inf) {
							_this.localVer = inf.version;
							_this.show = true;
						});
					} else {
						_this.show = false;
					}
				}, 100);
			});
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.overlay {
		background: rgb(245, 245, 245);
	}
	
	.img {
		background: url(../assets/images/My-1.png) 100% 100%;
		background-size: cover;
		color: #fff;
		position: relative;
		min-height: 170px;
		padding-top: 10px;
	}
	
	/deep/ .van-icon-arrow-left {
		color: white;
	}
	
	/deep/ .van-tag {
		padding: .1em .5em;
	}
	
	.mimeText {
		background: white;
		border-radius: 10px;
		padding: 20px 15px;
		color: black;
	}
	
	.imgLeft {
		width: 30px;
		height: 30px;
	}
	
	.textRight {
		margin-left: -10px;
		font-size: 16px;
		margin-top: 4px;
	}
	
	.textRow {
		margin-bottom: 20px;
	}
	
	.textRow:last-child {
		margin-bottom: 0px;
	}
</style>
